<docs>
  ## 点击进入服务指南详显
  ## props
</docs>
<template>
<div>
  <mheader class="index" @back_btn="goBack()" title="服务指南"></mheader>
  <div class="infor">
    <div class="infor-wrap" v-show="dataflag">
      <p class="infor-date">{{xxx.znmc}}</p>
      <div class="infor-text-wrap" v-html="xxx.znnr">
      </div>
      <div class="infor-text-wrap" v-show="textflag">
        <p class="infor-mas" v-for="(item, index) in xxx.fwznFjs" :key="index">
          附件：<span @click="fjlink(item.fjid)">{{item.name}}</span>
        </p>
      </div>
    </div>
    <div class="no-text" v-show="!dataflag">暂无数据</div>
  </div>
  </div>
</template>
<script>
import Mheader from '@/ldry/group/mheader/mheader';
import $ from '@/common/js/axios';

export default {
  components: { Mheader },
  name: 'infor',
  data() {
    return {
      dataflag:false,
      textflag:false,
      xxx: {}
    };
  },
  methods: {
    // 获取申请列表
    GET_reverseList() {
      this.$loading = true;
      $.get('/dafwgl/fwzn/xxxx',{ params: { fwznid: this.$route.query.sqid} }).then((res) => {
        this.xxx = res.returnData.xxxx;
        this.$loading = false;
        if (parseInt(res.returnData.executeResult, 10) === 1) {
          this.dataflag = true;
        // 暂无信息
        // 附件  (下载功能未做)
        // this.xxx.fwznFjs = [{fjid:"fb3628533cda00",name:"XXX"}]

        if (this.xxx.fwznFjs.length > 0) {
          this.textflag = true;
        }
        }else{
          this.$alert({
            type: 'warning',
            message: res.returnData.message
          },_=>{
            this.$router.push({name:'search'})
          });
        }
      }).catch(() => {});
    },
    goBack() {
      this.$router.go(-1);
    },
    // 附件  (下载功能未做)
    fjlink(id){
      this.$router.push({ name: "ReversePdf", query: { id:{fjid:id},tem:2}});
    }
  },
  created() {
    this.GET_reverseList();
  }
};
</script>
<style lang="scss" scoped>
  @import '~common/scss/variable.scss';
  .infor-text-wrap /deep/ span{
    line-height: $line-height-base !important;
    font-size: $font-size-base !important;
  }
  .infor-text-wrap /deep/ p{
    line-height: $line-height-base !important;
    font-size: $font-size-base !important;
  }
  .infor{
    .no-text{
      width: 984px;
      height: 300px;
      margin:84px auto 0;
      border: $border;
      background: #fff;
      text-align: center;
      line-height: 300px;
    }
    .infor-wrap{
    width: 100%;
    font-size: $font-size-base;
      .infor-date{
        font-size: $font-size-base;
        height: 66px;
        background: #D3D5DB;
        border-radius:32px;
        margin: 60px auto 40px;
        color: #3d5798;
        text-align: center;
        line-height: 0.66rem;
      }
      .infor-mas{
        height: 50px;
        line-height: 50px;
        background: #fff;
        color: #3d5798;
      }
      .infor-text-wrap{
        padding: $padding-base;
        box-sizing: border-box;
        border: $border;
        background: #fff;
      }
    }
  }
</style>
